<!--  -->
<template>
    <div class="main">
      <div class="operationalIndicators">
        <!-- explain -->
        <i class="V7_iconfont V7_iconV7tubiao_bangzhu-42 myIcon" v-popover:explainPopover></i>
          <div class="top">
            <div class="topicon">
              <i class="V7_iconfont V7_iconV7tubiao_huruxian"></i>
            </div>
            <div class="right">
              <p class="text-one">今日呼入总数</p>
              <p class="text-two">{{nowData.incomingCount ? nowData.incomingCount : 0}}</p>
            </div>
          </div>
          <div class="bottom">
            <p class="text-three"><span>呼入振铃未接听数</span> <span>{{nowData.incomingAgentNoAnswer ? nowData.incomingAgentNoAnswer : 0}}</span></p>
            <p class="text-three"><span>呼入接听数</span> <span>{{nowData.incomingAnswered ? nowData.incomingAnswered : 0}}</span></p>
            <p class="text-three"><span>呼入接通率</span> <span>{{nowData.incomingAnswerRate ? toPercentage(nowData.incomingAnswerRate) : 0}}</span></p>
            <p class="text-three"><span>呼入通话平均时长</span> <span>{{nowData.avgIncomingCallDuration ? toHMS(nowData.avgIncomingCallDuration) : 0}}</span></p>
          </div>
        </div>
        <div class="operationalIndicators">
          <i class="V7_iconfont V7_iconV7tubiao_bangzhu-42 myIcon" v-popover:explainPopoverQueue></i>
          <div class="top">
            <div class="topicon orange">
              <i class="V7_iconfont V7_iconV7tubiao_waihu"></i>
            </div>
            <div class="right">
              <p class="text-one">今日外呼总数</p>
              <p class="text-two">{{nowData.outgoingCount ? nowData.outgoingCount : 0}}</p>
            </div>
          </div>
          <div class="bottom">
            <p class="text-three"><span>外呼失败数</span> <span class="three-number">{{nowData.outgoingFailed ? nowData.outgoingFailed : 0}}</span></p>
            <p class="text-three"><span>外呼接通数</span> <span>{{nowData.outgoingAnswered ? nowData.outgoingAnswered :0}}</span></p>
            <p class="text-three"><span>外呼接通率</span> <span>{{nowData.outgoingAnswerRate ? toPercentage(nowData.outgoingAnswerRate) : 0 }}</span></p>
            <p class="text-three"><span>外呼通话平均时长</span> <span>{{nowData.avgOutgoingCallDuration ? toHMS(nowData.avgOutgoingCallDuration) : 0}}</span></p>
            <p class="text-three"><span>风控拦截</span> <span>{{nowData.riskCount ? nowData.riskCount : 0}}</span></p>
          </div>
        </div>
        <div class="operationalIndicators">
          <i class="V7_iconfont V7_iconV7tubiao_bangzhu-42 myIcon" v-popover:explainPopoverAgent></i>
          <div class="top">
            <div class="topicon blue">
              <i class="V7_iconfont V7_iconV7tubiao_paidui"></i>
            </div>
            <div class="right">
              <p class="text-one">技能组排队数</p>
              <p class="text-two">{{nowData.queueCount ? nowData.queueCount : 0}}</p>
            </div>
          </div>
          <div class="bottom">
            <p class="text-three"><span>排队放弃数</span> <span>{{nowData.queueAbandoned ? nowData.queueAbandoned : 0}}</span></p>
            <p class="text-three"><span>接通平均排队时长</span> <span>{{nowData.avgQueueWaitDuration ? toHMS(nowData.avgQueueWaitDuration)  : 0}}</span></p>
            <p class="text-three"><span>服务水平</span> <span>{{nowData.answeredInTimeRate ? toPercentage(nowData.answeredInTimeRate) : 0}}</span></p>
            <p class="text-three"><span>邀评数</span> <span>{{nowData.satisfInvi ? nowData.satisfInvi : 0}}</span></p>
            <p class="text-three"><span>参评率</span> <span>{{ nowData.satisfEvalRate ? toPercentage(nowData.satisfEvalRate) : 0}}</span></p>
          </div>
        </div>
        <div class="operationalIndicators">
          <i class="V7_iconfont V7_iconV7tubiao_bangzhu-42 myIcon" v-popover:explainPopoverEvaluate></i>
          <div class="top">
            <div class="topicon green">
              <i class="V7_iconfont V7_iconV7tubiao_zixun"></i>
            </div>
            <div class="right">
              <p class="text-one">通话中座席</p>
              <p class="text-two">{{nowData.calling ?  nowData.calling : 0}}</p>
            </div>
          </div>
          <div class="bottom">
            <p class="text-three"><span>登录座席</span> <span>{{nowData.online ? nowData.online : 0}}</span></p>
            <p class="text-three"><span>离线接听座席</span> <span>{{nowData.answeroffline ? nowData.answeroffline : 0}}</span></p>
            <p class="text-three"><span>可用licence</span> <span>{{nowData.licenceAvailable ? nowData.licenceAvailable : 0}}</span></p>
            <p class="text-three"><span>空闲座席</span> <span>{{nowData.state0 ? nowData.state0 : 0}}</span></p>
            <p class="text-three"><span>忙碌座席</span> <span>{{nowData.state1 ? nowData.state1 : 0}}</span></p>
            <p v-for="item in agentStateList" :key="item.name" class="text-three"> <span :title="item.name"  class="explainMain-name">{{item.name}}</span> <span>{{item.value ? item.value : 0}}</span> </p>
          </div>
          <el-popover
          ref="explainPopover"
          placement="top"
          width="300"
          trigger="hover"
          popper-class="custom-search-pop"
          >
         <div class='explainMain'>
           <p v-for="item in notes.filter(i=>i.group==='1')" :key="item.name"><span   style="color:#303753">{{item.name}}: </span><span style="color:#686E84">{{item.note}}</span></p>
         </div>
        </el-popover>
        <el-popover
          ref="explainPopoverQueue"
          placement="top"
          width="300"
          trigger="hover"
          popper-class="custom-search-pop"
          >
         <div class='explainMain'>
           <p v-for="item in notes.filter(i=>i.group==='2')" :key="item.name"><span style="color:#303753">{{item.name}}: </span><span style="color:#686E84">{{item.note}}</span></p>
         </div>
        </el-popover>
        <el-popover
          ref="explainPopoverAgent"
          placement="top"
          width="300"
          trigger="hover"
          popper-class="custom-search-pop"
          >
         <div class='explainMain'>
           <p v-for="item in notes.filter(i=>i.group==='3')" :key="item.name"><span style="color:#303753">{{item.name}}: </span><span style="color:#686E84">{{item.note}}</span></p>
         </div>
        </el-popover>
        <el-popover
          ref="explainPopoverEvaluate"
          placement="top"
          width="300"
          trigger="hover"
          popper-class="custom-search-pop"
          >
         <div class='explainMain'>
           <p v-for="item in notes.filter(i=>i.group==='4')" :key="item.name"><span style="color:#303753">{{item.name}}: </span><span style="color:#686E84">{{item.note}}</span></p>
         </div>
        </el-popover>
        </div>
    </div>
</template>

<script lang='ts'>
import { Component, Vue, Prop } from 'vue-property-decorator'
// import { ReportModule } from '@/store/modules/report'
// import { commonAction, deepClone } from '@/utils/common'
import { notes2 } from './notes'
import { toHMS } from './tables/review'
@Component({ name: 'OperationalIndicator' })
export default class extends Vue {
  @Prop({
    default: () => {
      return {
        incoming: {},
        outgoing: {},
        queue: {},
        agent: {}
      }
    }
  }) private allData !: any

  @Prop({ default: () => [] }) private agentState!: any

  get notes () {
    return notes2
  }

  private toHMS (val) {
    return toHMS(val)
  }

  get agentStateList () {
    const list: any = []
    for (let i = 0; i < this.agentState.length; i++) {
      const element = this.agentState[i]
      if (element.status === 'enable') {
        list.push({
          name: element.name + '座席',
          value: this.nowData[`state${element.number}`],
          note: `当前处于“${element.name}”状态的座席数量`
        })
      }
    }
    // console.log(this.agentState, 123123)
    return list
  }

  get nowData () {
    const data = this.allData
    const res = Object.assign({}, data.incoming, data.outgoing, data.queue, data.agent)
    return res
  }

  public toPercentage (val) {
    let result
    if (isNaN(Number(val))) {
      result = '0%'
    } else {
      result = (Number(val) * 100).toFixed(2) + '%'
    }
    return result
  }
}
</script>
<style lang='stylus' scoped>
.main
  display flex
  width 100%
  justify-content: space-between;
.operationalIndicators
  width calc((100% - 72px) / 4)
  height 225px
  background #F6F9FC
  border-radius 10px
  position relative
  .top
    // width 245px
    height 90px
    background #FFFFFF
    box-shadow 0px 1px 10px 0px rgba(226, 235, 247, 0.8)
    border-radius 10px 10px 16px 16px
    padding 20px
    overflow hidden
    display flex
    align-items center
    .topicon
      width 50px
      height 50px
      background linear-gradient(90deg, #49ACF3, #1897F1)
      box-shadow 0px 4px 20px 0px #AED2FA
      border-radius 16px
      margin-right 20px
      display flex
      justify-content center
      align-items center
      cursor pointer
      i
        font-size 18px
        color: #FFFFFF
    .text-one
      height: 12px;
      font-size: 12px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #767E91;
      line-height 12px
    .text-two
      font-size: 24px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #303753;
  .bottom
    margin-top 16px
    padding 0 19px
    box-sizing: border-box;
    height: 111px;
    overflow: auto;
    & p:last-child
      margin-bottom: 0
  .text-three
    margin-bottom 11px
    font-size: 12px;
    height 12px
    line-height 12px
    font-family: PingFang SC;
    font-weight: 400;
    color: #767E91;
    display flex
    justify-content: space-between;
    & span:last-child
      font-weight: 400;
      color: #303753;
    & span:first-child
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      display inline-block
      width 50%
.orange
  background: linear-gradient(90deg, #F7B197, #FE9D7C)!important
  box-shadow: 0px 4px 20px 0px #FADCD4!important
.blue
  background: linear-gradient(90deg, #A5EFFC, #98E0EC)!important
  box-shadow: 0px 4px 20px 0px #C1F1FD!important
.green
  background: linear-gradient(90deg, #7FE398, #2ED47A)!important
  box-shadow: 0px 4px 20px 0px #A8F4BF!important
.myIcon
  font-size 12px
  color #B3B9C7
  position absolute
  top 10px
  right 10px
.explainMain
  padding 14px
  height 210px
  overflow auto
.custom-search-pop
  padding 0
  min-width unset
</style>
